<template>
  <div ref="chartContainer" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import { getDiabetesAmount } from "@/api/system/system.js";
const chartContainer = ref(null);

onMounted(async () => {
  try {
    // 模拟从服务器获取数据
    const response = await getDiabetesAmount(); // 替换成你的API地址
    const chartData = response.data;

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(chartContainer.value);

    // 配置项和数据
    const option = {
      tooltip: {
        trigger: "item"
      },
      legend: {
        top: "4%",
        left: "2%",
        orient: "vertical",
        icon: "circle", //图例形状
        align: "left",
        itemGap: 20,
        textStyle: {
          fontSize: 13,
          color: "#a1a1a1",
          fontWeight: 500
        }
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: "50%",
          data: chartData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  } catch (error) {
    console.error("获取数据失败", error);
  }
});
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>
